<template>
	<view>
		<!-- 多商品banner -->
		<view class="list-item-center-one" v-if="orderitem.goods_list.length > 1">
			<scroll-view :scroll-x="true">
				<image :src="goodsItem.goods_pic" mode="aspectFill"
					v-for="(goodsItem, goodsIndex) in orderitem.goods_list" :key="goodsIndex"></image>
			</scroll-view>
			<view>
				<view class="order-rightSide">
					<view>
						<view class="order-price">
							<text>￥</text>
							<text>{{ orderitem.pay_price | priceBeforeZero }}</text>
							<text>{{ orderitem.pay_price | priceAfterZero }}</text>
						</view>
						<view>{{ $t("order.total1") }}{{ orderitem.goods_list | totalCount
              }}{{ $t("order.total2") }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 单商品banner -->
		<view class="list-item-center-two" v-if="orderitem.goods_list.length == 1">
			<view v-for="(goodsItem, goodsIndex) in orderitem.goods_list" :key="goodsIndex" class="list-good-item">
				<image :src="goodsItem.goods_pic" mode="aspectFill"></image>
				<view class="goods-info">
					<view class="goods-name">{{ goodsItem.goods_name }}</view>
					<view class="goods-sku">
						<view class="skuList">
							<text v-for="(sku, skuIndex) in goodsItem.attr_list" :key="skuIndex">
								<text v-if="sku.attr_group_name" class="sku">{{ sku.attr_group_name }}{{ sku.attr_name
                  }}{{ skuIndex == goodsItem.attr_list.length - 1 ? "" : "，" }}
								</text>
							</text>
						</view>
						<!-- <test class="count">×{{ goodsItem.num }}</test> -->
					</view>
					<view class="goods-price">
						<text>￥</text>
						<text>{{ orderitem.pay_price | priceBeforeZero }}</text>
						<text>{{ orderitem.pay_price | priceAfterZero }}</text>
					</view>
					<view class="order_type_head">
						{{orderitem.order_type == 0?'农场收取订单':'提货订单'}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: {
			orderitem: {
				type: Object,
				default: () => {
					return {};
				},
			},
		},
		filters: {
			priceBeforeZero(val) {
				let str = val + "";
				if (str.indexOf(".") < 0) return `${str}.`;
				return str.substr(0, str.indexOf("."));
			},
			priceAfterZero(val) {
				let str = val + "";
				if (str.indexOf(".") < 0) return "00";
				return str.substr(str.indexOf("."), str.length);
			},
			totalCount(val) {
				let num = 0;
				val.forEach((item) => {
					num += item.num - 0;
				});
				return num;
			},
		},
		computed: {},
	};
</script>

<style lang="scss" scoped>
	.order_type_head {
		font-size: 24rpx;
		font-weight: 400;
		color: #8c8c8c;
	}

	.list-item-center-one {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;

		scroll-view {
			overflow-x: scroll;
			flex: 1;
			white-space: nowrap;

			image {
				margin-right: 10rpx;
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				display: inline-block;
			}

			image:last-child {
				margin-right: 170rpx;
			}
		}

		.order-rightSide {
			width: 200rpx;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 11;
			background: linear-gradient(90deg,
					rgba(255, 255, 255, 0),
					#ffffff,
					#ffffff);

			view:first-child {
				display: flex;
				flex-direction: column;
				text-align: right;
				width: 100%;

				.order-price {
					font-weight: bold;
					color: #262626;
					flex-direction: initial;
					align-items: baseline;
					justify-content: flex-end;

					text:first-child {
						font-size: 24rpx;
					}

					text:nth-child(2) {
						font-size: 32rpx;
					}

					text:last-child {
						font-size: 24rpx;
					}
				}

				view:last-child {
					margin-top: 4rpx;
					font-size: 24rpx;
					color: #8f8f8f;
				}
			}
		}
	}

	.list-item-center-two {
		margin-top: 30rpx;

		.list-good-item {
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				margin-right: 24rpx;
			}

			.goods-info {
				flex: 1;

				.goods-name {
					font-size: 28rpx;
					font-family: PingFang SC;
					color: #262626;
					line-height: 32rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

				.goods-sku {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #8c8c8c;
					line-height: 34rpx;
					margin: 10rpx 0 14rpx 0;
					display: flex;
					justify-content: space-between;

					.skuList {
						max-width: 426rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.goods-price {
					color: #262626;
					font-size: 22rpx;
					display: flex;
					align-items: baseline;
					font-weight: 600;

					text:nth-child(1) {
						font-size: 24rpx;
					}

					text:nth-child(2) {
						font-size: 32rpx;
					}

					text:last-child {
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
